<template>
  <div class="main-page-wrapper">
      <div class="main-container">
          <div class="focus-container">
            <div class="focus-title">
                <span>焦点图管理</span>
              </div>
              <div class="focus-main">
                 <div class="focus-main-content">
                       <div :key=item.id v-for="item in img" class="focus-card">
                            <div class="img">
                                <img class="img-item" :src="item.path"/>
                            </div>
                            <div class="button">
                                <p>
                                     <el-upload action="" :before-upload="stopUplaod">
                                         <el-button size="small" type="primary"  @click="upload(item)">上传</el-button>
                                     </el-upload>
                                 </p> 
                               
                                <p><el-button size="small" type="danger" @click="del(item)">删除</el-button></p> 
                            </div>
                       </div>
                 </div>
                 <el-dialog title="焦点图" :visible="visible" width="30%">
                        <el-form>
                            <el-form-item label="上传焦点图">
                                 <el-upload>
                                     <el-button size="small" type="primary">点击上传</el-button>
                                 </el-upload>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary">确定</el-button>
                                <el-button>取消</el-button>
                            </el-form-item>
                        </el-form>
                 </el-dialog>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
   data(){
       return {
            visible:false,
            file:'',
            id:''
       }
   },
   computed: {
    ...mapGetters({
      'img':'getFocusImg'
    })
   }
   ,
   created(){
     this.$store.dispatch('getFocusImg')
   },
   methods:{
       upload:function(item){
        //  var data = new FormData();
        //  data.append(item.id);
        //  data.append(item.path);
        //  this.$store.dispatch("updateFocusImg",data);
       //alert(1)
       this.id = item.id;
       },
       del:function(item){
          this.$store.dispatch("delFocusImg",item.id);
       },
       stopUplaod(file){
            var data = new FormData();
            data.append("id",this.id);
            data.append("img",file);
           this.$store.dispatch("updateFocusImg",data);
           return false;
       }
   }
}
</script>
<style scoped>
   .focus-container{
        height: 100%;
        border: 1px solid #ddd;
        border-radius:5px;
        position: relative;
    }
    .focus-title{
        height: 60px;
        background-color: #dddddd;
    }
    .focus-title span{
        margin-left: 20px;
         text-align: left;
        line-height: 60px;
    }
     .focus-main{
        position: absolute;
        width: 100%;
        top:60px;
        left:0;
        bottom:0;
      
    }
    .focus-main-content{
        border-right: 1px solid #ddd;
        width:600px;
        height: 100%;
        justify-content: space-between;
        overflow: auto;
    }
    .focus-card{
        height: 150px;
        background-color: #ced;
        margin: 5px;
        display: flex;
        flex-flow: row nowrap;
    }
    .focus-card .img{
        width:550px;
    }

    .focus-card .button{
        width: 60px;
        margin-right: 10px;
        top:0;
        bottom: 0;
    }

    .img-item{
       padding: 5px;
       width: 400px;
       height: 130px; 
    }
</style>
